import { useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';

// 表格字段类型
type TableRecord = {
  name: string;
  age: number;
  gender: '男' | '女';
  email: string;
  address: string;
  create_time: string;
  guid: string;
};
// 查询字段类型
type SearchValue = {
  name: string;
  gender: string;
};

const mockData = new Array(100).fill(1).map<TableRecord>((v, index) => {
  return {
    name: `用户${index}`,
    age: Math.floor(Math.random() * 100),
    gender: Math.random() > 0.6 ? '女' : '男',
    email: Math.random() + '@abc.com',
    address: `地址${index}`,
    create_time: '随机时间',
    guid: `dasklfjaf${index}`,
  };
});

export default function () {
  const [columns] = useState<YmTablePorps<TableRecord, SearchValue>['columns']>(
    [
      {
        dataIndex: 'name',
        title: '姓名',
        key: 'name',
        fixed: 'left',
        width: 80,
      },
      {
        dataIndex: 'age',
        title: '年龄',
        key: 'age',
        width: 100,
      },
      {
        dataIndex: 'gender',
        title: '性别',
        key: 'gender',
        width: 80,
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        key: 'email',
        width: 300,
      },
      {
        dataIndex: 'address',
        title: '地址',
        key: 'address',
        width: 300,
      },
      {
        dataIndex: 'create_time',
        title: '创建时间',
        key: 'create_time',
        width: 300,
      },
    ],
  );

  return (
    <div style={{ height: '100VH' }}>
      <YmTable<TableRecord, SearchValue>
        columns={columns}
        rowKey="guid"
        searchForm={{
          formItems: [
            {
              hidden: true,
              name: 'name',
              label: '名称',
              valueType: {
                type: 'input',
              },
            },
            {
              name: 'gender',
              label: '性别',
              valueType: {
                type: 'select',
                selectProps: {
                  options: [
                    {
                      label: '男',
                      value: '男',
                    },
                    {
                      label: '女',
                      value: '女',
                    },
                  ],
                },
              },
            },
          ],
        }}
        toolBar={{
          items: [],
        }}
        request={async (table, searchValue) => {
          const { pageIndex = 1, pageSize = 10 } = table.page ?? {};

          await new Promise((resolve) => {
            setTimeout(() => resolve(null), 2000 * Math.random());
          });

          const start = (pageIndex - 1) * pageSize;
          const end = start + pageSize;

          let result = mockData
            .filter((v) => {
              return (
                v.name.includes(searchValue?.name ?? '') &&
                v.gender.includes(searchValue?.gender ?? '')
              );
            })
            .map((v) => ({ ...v }));

          return {
            list: result.slice(start, end),
            total: result.length,
          };
        }}
      >
        {({ formNode, tableNode, tabsNode, toolBarNode }) => {
          return (
            <>
              {formNode}
              {tabsNode}
              {toolBarNode}
              <div style={{ height: 200 }}>
                这里是我想要插入的内容,我可以任意插入一个内容，自行控制样式
              </div>
              {tableNode}
            </>
          );
        }}
      </YmTable>
    </div>
  );
}
